import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

// 1. 下面三行代码的作用：导入所有svg图标到项目中
// 1.1 得到一个导入上下文函数，上下文函数可以导入./svg文件夹下  以 .svg结尾的文件
//     require.context(文件夹路径, 是否导入子目录中的内容, 正则)
const req = require.context('./svg', false, /\.svg$/)
// console.log(req) // 函数
// console.log(req.keys()) // ['./404.svg', './bug.svg']
// req('./404.svg') //  和后面的代码一个意思  import './404.svg'

// 1.2 定义了一个用来导入所有svg图片的函数
const requireAll = requireContext => requireContext.keys().map(requireContext)

// 1.3 调用函数导入所有svg图片
//  req('./404.svg')
//  req('./bug.svg')
requireAll(req)

// 封装使用svg图标组件的思路
// 1. 导入所有svg图标
// 2. svg图标需要,以特定的loader打包
// 3. 组件的封装和使用
